<template>
  <div>
    <!-- 主要内容输入框和搜索重置按钮 -->
    <i-search ref="iSearch" :model="formData" @search="fetch" @reset="reset">
      <el-form-item label="门店编号" prop="storeId">
        <el-input v-model="formData.storeId"></el-input>
      </el-form-item>
      <el-form-item label="门店名称" prop="storeName">
        <el-input v-model="formData.storeName"></el-input>
      </el-form-item>
      <el-form-item label="店长名称" prop="userName">
        <el-input v-model="formData.userName"></el-input>
      </el-form-item>
      <el-form-item label="所在省份" prop="province">
        <el-select
          v-model="formData.province"
          placeholder="请选择"
          class="selectlocation"
          @change="showMessage($event)"
        >
          <el-option
            v-for="(item,index) in ProvinceData"
            :label="item.dictoryValue"
            :value="item.dictoryId"
            :key="index"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="所在城市" prop="city">
        <el-select
          v-model="formData.city"
          placeholder="请选择"
          class="selectlocation"
          @change="showCityMessage($event)"
        >
          <el-option
            v-for="(item,index) in CityData"
            :label="item.dictoryValue"
            :value="item.dictoryId"
            :key="index"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="所在区" prop="district">
        <el-select v-model="formData.district" placeholder="请选择" class="selectlocation">
          <el-option
            v-for="(item,index) in areaData"
            :label="item.dictoryValue"
            :value="item.dictoryId"
            :key="index"
          ></el-option>
        </el-select>
      </el-form-item>
    </i-search>

    <!-- 表格区域 -->
    <i-table
      :toolbar="toolbar"
      :tableData="tableData"
      :pageInfo="pageInfo"
      :selectionShow="true"
      @handleCurrentChange="handleCurrentChange"
      @handleSizeChange="handleSizeChange"
      @selection-change="handleSelectionChange"
    >
      <el-table-column
        v-for="(item,index) in columnList"
        :key="index"
        :label="item.label"
        :prop="item.prop"
        align="center"
      ></el-table-column>
    </i-table>

    <!-- 门店信息新增用户对话框 -->
    <i-dialog
      v-model="dialogVisible"
      :title="dialogTitle"
      @dialog-before-close="dialogBeforeClose"
      @dialog-cancel="dialogCancel"
      @dialog-confirm="dialogConfirm"
    >
      <el-form
        :model="dialogFormData"
        ref="formRef"
        :rules="formRules"
        label-width="100px"
        label="新增门店"
      >
        <el-row>
          <el-col :span="12">
            <el-form-item label="门店名称" prop="storeName">
              <el-input v-model="dialogFormData.storeName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="联系电话" prop="storePhone">
              <el-input v-model="dialogFormData.storePhone"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="营业执照编码" prop="lincese">
              <el-input v-model="dialogFormData.lincese"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="所在省份" prop="province">
              <el-select
                v-model="dialogFormData.province"
                placeholder="请选择"
                class="selectlocation"
                @change="showMessage($event)"
              >
                <el-option
                  v-for="(item,index) in ProvinceData"
                  :label="item.dictoryValue"
                  :value="item.dictoryId"
                  :key="index"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="所在城市" prop="city">
              <el-select
                v-model="dialogFormData.city"
                placeholder="请选择"
                class="selectlocation"
                @change="showCityMessage($event)"
              >
                <el-option
                  v-for="(item,index) in CityData"
                  :label="item.dictoryValue"
                  :value="item.dictoryId"
                  :key="index"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="所在区" prop="district">
              <el-select v-model="dialogFormData.district" placeholder="请选择" class="selectlocation">
                <el-option
                  v-for="(item,index) in areaData"
                  :label="item.dictoryValue"
                  :value="item.dictoryId"
                  :key="index"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="店长编号" prop="userId" width="30">
              <el-input v-model="dialogFormData.userId"></el-input>
              <el-button
              type="primary"
              style="transform: translateX(222px);
    position: relative;
    top: -40px;"
              @click="SearchStoreCode"
            >查询</el-button>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="详细地址" prop="address">
              <el-input
                type="textarea"
                :autosize="{ minRows: 2, maxRows: 4}"
                placeholder="请输入内容"
                v-model="dialogFormData.address"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </i-dialog>

    <!-- 门店信息修改会话框 -->
    <i-dialog
      v-model="editdialogVisible"
      :title="editdialogTitle"
      @dialog-before-close="editdialogBeforeClose"
      @dialog-cancel="editdialogCancel"
      @dialog-confirm="editdialogConfirm"
    >
      <el-form
        :model="editdialogFormData"
        ref="editformRef"
        :rules="formRules"
        label-width="100px"
        label="修改门店"
      >
        <el-row>
          <el-col :span="12">
            <el-form-item label="门店名称" prop="storeName">
              <el-input v-model="editdialogFormData.storeName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="联系电话" prop="storePhone">
              <el-input v-model="editdialogFormData.storePhone"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="营业执照编码" prop="lincese">
              <el-input v-model="editdialogFormData.lincese"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="所在省份" prop="province">
              <el-select
                v-model="editdialogFormData.province"
                placeholder="请选择"
                class="selectlocation"
                @change="showMessage($event)"
              >
                <el-option
                  v-for="(item,index) in ProvinceData"
                  :label="item.dictoryValue"
                  :value="item.dictoryId"
                  :key="index"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="所在城市" prop="city">
              <el-select
                v-model="editdialogFormData.city"
                placeholder="请选择"
                class="selectlocation"
                @change="showCityMessage($event)"
              >
                <el-option
                  v-for="(item,index) in CityData"
                  :label="item.dictoryValue"
                  :value="item.dictoryId"
                  :key="index"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="所在区" prop="district">
              <el-select
                v-model="editdialogFormData.district"
                placeholder="请选择"
                class="selectlocation"
              >
                <el-option
                  v-for="(item,index) in areaData"
                  :label="item.dictoryValue"
                  :value="item.dictoryId"
                  :key="index"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="店长编号" prop="userId" width="30">
              <el-input v-model="editdialogFormData.userId"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-button
              type="primary"
              style="transform: translateX(-38px);
    position: relative;
    top: 5px;"
              @click="SearchStoreCode"
            >查询</el-button>
          </el-col>
          <el-col :span="12">
            <el-form-item label="详细地址" prop="address" style="transform:translateY(-30px)">
              <el-input
                type="textarea"
                :autosize="{ minRows: 2, maxRows: 4}"
                placeholder="请输入内容"
                v-model="editdialogFormData.address"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </i-dialog>

    <!-- 门店详情对话框 -->
    <el-dialog
      title="门店详情"
      :visible.sync="shopDetaildialogVisible"
      width="70%"
      :before-close="handleClose"
      @dialog-cancel="shopDetaildialogCancel"
    >
      <!-- 门店详情表格区域 -->
      <el-table :data="detailTableDate" border style="width: 100%">
        <el-table-column
          v-for="(item,index) in detailcolumnList"
          :key="index"
          :label="item.label"
          :prop="item.prop"
          align="center"
        ></el-table-column>
      </el-table>
      <span slot="footer">
        <el-button @click="shopDetaildialogVisibled">关闭</el-button>
      </span>
    </el-dialog>

    <!-- 店长编号查询 -->
    <el-dialog title="店长编号查询" :visible.sync="managerCodedialogVisible" width="70%">
      <i-search
        ref="iSearch"
        :model="managerCodeformData"
        @search="managerCodefetch"
        @reset="managerCodereset"
      >
        <el-form-item label="店长账号" prop="userAccount">
          <el-input v-model="managerCodeformData.userAccount"></el-input>
        </el-form-item>
        <el-form-item label="店长姓名" prop="userName">
          <el-input v-model="managerCodeformData.userName"></el-input>
        </el-form-item>
      </i-search>
      <i-table
        :tableData="managerCodeSelecttableData"
        :pageInfo="managerCodeSelectpageInfo"
        :selectionShow="true"
        @handleCurrentChange="managerCodehandleCurrentChange"
        @handleSizeChange="managerCodehandleSizeChange"
        @selection-change="managerCodehandleSelectionChange"
      >
        <el-table-column
          v-for="(item,index) in managerCodeSelectcolumnList"
          :key="index"
          :label="item.label"
          :prop="item.prop"
          align="center"
        ></el-table-column>
      </i-table>
      <span slot="footer" class="dialog-footer">
        <el-button @click="managerCodeGoodsdialogVisibled">取 消</el-button>
        <el-button type="primary" @click="managerCodeGoodSubmit">提交</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
// 注意首两个字母要大写，这样才会被识别出来所调用的子组件
import ISearch from "../../components/common/i-search.vue";
import ITable from "../../components/common/i-table.vue";
import IDialog from "../../components/common/i-dialog.vue";
import req from "@/api/shop-info-manage.js";
export default {
  name: "shop-info-manage",
  data() {
    return {
      // 搜索框数据对象
      formData: {
        storeId:'',
        storeName:'',
        userName:''
      },
      // 新增按钮弹出框输入的数据对象
      dialogFormData: {
        storeName:"",
        storePhone:'',
        lincese:'',
        userId:'',
        address:''
      },
      // 修改按钮弹出框数据
      editdialogFormData: {
        storeName:'',
        storePhone:'',
        lincese:'',
        userId:'',
        address:''
      },
      // 店长编号查询搜索框数据对象
      managerCodeformData: {},
      // 表格内容数据
      tableData: [],
      // 店长详情数组
      detailTableDate: [],
      // 店长编号表格数据
      managerCodeSelecttableData: [],
      // 店长详情对象
      detailTableDateArr: {},
      // 存放所有的省市区数据
      ProvinceData: [],
      CityData: [],
      areaData: [],
      // 选择省市对应的id
      provinceId: "",
      cityId: "",
      // 设置新增弹出框的默认状态为隐藏
      dialogVisible: false,
      // 设置修改会话框默认状态为隐藏
      editdialogVisible: false,
      // 门店详情会话框默认为隐藏
      shopDetaildialogVisible: false,
      // 店长编号对话框默认隐藏
      managerCodedialogVisible: false,
      // 修改店长对话框查询编号设置默认隐藏
      editmanagerCodedialogVisible: false,
      // 存储选中门店  信息的id
      multipId: [],
      // 存储选中店长的id
      managerId: [],
      // 新增按钮的弹出框标题提示
      dialogTitle: "新增门店信息",
      // 修改按钮会话框标题
      editdialogTitle: "修改门店信息",
      // 分页数据
      pageInfo: {
        pageIndex: 1,
        pageSize: 5,
        total: 0
      },
      // 店长编号查询分页数据
      managerCodeSelectpageInfo: {
        pageIndex: 1,
        pageSize: 5,
        total: 0
      },
      // 表格区域多个按钮数据设置
      toolbar: [
        {
          btnName: "详情",
          type: "primary",
          // 设置按钮的触发事件
          func: () => {
            
            console.log(this.multipId);
            if (this.multipId.length === 1) {
              this.shopDetaildialogVisible = true;
              req("getStoreDetail", {
                storeId: this.multipId[0]
              }).then(data => {
                console.log('门店信息详情',data);
                console.log(data.data);
              this.multipId=[]
                // 把返回的数据对象转化为数组来进行查询显示
                this.detailTableDateArr = data.data;
                this.detailTableDate.push(this.detailTableDateArr);
                console.log(this.detailTableDate);
              });
            }
          }
        },
        {
          btnName: "新增",
          type: "primary",
          // 设置按钮的触发事件
          func: () => {
            this.dialogVisible = true;
            this.getProvince()
          }
        },
        {
          btnName: "修改",
          type: "primary",
          func: () => {
            if (this.multipId.length === 1) {
              this.editdialogVisible = true;
              req("getStore", {
                storeId: this.multipId[0]
              }).then(data => {
              console.log('门店信息修改',data)
              this.getlistCity(data.data.province)
              this.getlistDistrict(data.data.city)
                this.editdialogFormData = data.data;
              });
            } 
          }
        },
        {
          btnName: "删除",
          type: "primary",
          func: async () => {
            if(this.multipId.length!==0){
const confirmResult = await this.$confirm(
              "此操作将永久删除所选门店, 是否继续?",
              "提示",
              {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
              }
            ).catch(err => err);
            if (confirmResult !== "confirm") {
               this.$message("已取消删除")
               this.fetch()
            } else {
              req("deleteStore", {
                storeId: this.multipId.join(",")
              }).then(data => {
                if (data.code !== 0) {
                  return this.$message.error("删除门店失败");
                }
                this.$message.success("删除门店成功");
                this.fetch();
              });
            }
            }
            
          }
        }
      ],
      // 表格表头数据
      columnList: [
        { label: "门店编号", prop: "storeId" },
        { label: "门店名称", prop: "storeName" },
        { label: "门店电话", prop: "storePhone" },
        { label: "详细地址", prop: "address" },
        { label: "店长姓名", prop: "userName" },
        { label: "营业执照", prop: "lincese" },
        { label: "店长电话", prop: "userPhone" }
      ],
      // 门店详情表格表头数据
      detailcolumnList: [
        { label: "门店名称", prop: "storeName" },
        { label: "联系电话", prop: "storePhone" },
        { label: "店铺邀请码", prop: "invitationCode" },
        { label: "营业执照编码", prop: "lincese" },
        { label: "省市区地址", prop: "area" },
        { label: "店长名称", prop: "userName" },
        // { label: "店长电话", prop: "userPhone" },
        { label: "详细地址", prop: "address" }
      ],
      // 店长编号对话框表头
      managerCodeSelectcolumnList: [
        { label: "店长编号", prop: "userId" },
        { label: "店长账号", prop: "userAccount" },
        { label: "店长电话", prop: "phone" },
        { label: "店长姓名", prop: "userName" }
      ],
      // 表单验证规则
      formRules: {
        storeName: [
          { required: true, message: "请输入门店名称", trigger: "change" }
        ],
        storePhone: [
          { required: true, message: "请输入联系电话", trigger: "change" }
        ],
        userId: [
          { required: true, message: "请输入店长编号", trigger: "change" }
        ],
        lincese: [
          { required: true, message: "请输入营业执照编码", trigger: "change" }
        ],
        province: [
          { required: true, message: "请选择所在省份", trigger: "change" }
        ],
        city: [
          { required: true, message: "请选择所在城市", trigger: "change" }
        ],
        district: [
          { required: true, message: "请选择所在区", trigger: "change" }
        ],
        address: [
          { required: true, message: "请输入详细地址", trigger: "change" }
        ]
      }
    };
  },
  mounted() {
    this.fetch(), this.getProvince();
  },
  methods: {
    // 获取选择的省的id
    showMessage(e) {
      this.provinceId = e;
      this.getlistCity();
    },
    // 获取选择的市的id
    showCityMessage(e) {
      this.cityId = e;
      this.getlistDistrict();
    },
    // 获取省会
    getProvince() {
      req("listProvince", {}).then(data => {
        this.ProvinceData = data.data;
      });
    },
    // 获取城市
    getlistCity(number) {
      if(number){
        req("listCity", {
        parentId: number
      }).then(data => {
        console.log(data)
        // this.editdialogFormData.city 
        this.CityData = data.data;
      });
      }
      req("listCity", {
        parentId: this.provinceId
      }).then(data => {
        // console.log(data);
        this.CityData = data.data;
      });
    },
    // 获取对应区
    getlistDistrict(number) {
      if(number){
        req("listDistrict", {
        parentId: number
      }).then(data => {
        // console.log(data);
        this.areaData = data.data;
      });
      }
      req("listDistrict", {
        parentId: this.cityId
      }).then(data => {
        // console.log(data);
        this.areaData = data.data;
      });
    },
// 初始化页面表格页号数据
    fetch() {
      this.pageInfo.pageIndex = 1;
      this.pageInfo.pageSize = 5;
      this.search();
    },
    // 初始化店长查询编号页号
    managerCodefetch() {
      this.managerCodeSelectpageInfo.pageIndex = 1;
      this.managerCodeSelectpageInfo.pageSize = 5;
      this.search();
    },
    // 获取页面表格信息
    search() {
      req("getTableData", {
        ...this.formData,
        role:JSON.parse(sessionStorage.getItem('role')).role,
        pageSize: this.pageInfo.pageSize,
        pageNum: this.pageInfo.pageIndex
      }).then(data => {
        console.log('table',data);
        this.pageInfo.total = data.data.total;
        this.pageInfo.pageSize = data.data.pageSize;
        this.pageInfo.pageIndex = data.data.pageNum;
        this.tableData = data.data.list;
      });
    },
// 查询店长编号
    managerCodesearch() {
      req("selectManger", {
        pageSize: this.managerCodeSelectpageInfo.pageSize,
        pageNum: this.managerCodeSelectpageInfo.pageIndex
      }).then(data => {
        console.log('编号',data);
        this.managerCodeSelectpageInfo.total = data.data.total;
        this.managerCodeSelectpageInfo.pageSize = data.data.pageSize;
        this.managerCodeSelectpageInfo.pageIndex = data.data.pageNum;
        this.managerCodeSelecttableData = data.data.list;
      });
    },
    reset() {
      // this.fetch()
      this.fetch();
    },
    managerCodereset() {
      this.managerCodefetch()
      // this.fetch();
    },
    // editmanagerCodereset() {
    //   this.fetch();
    // },
    // 每页多少条数据
    handleSizeChange(value) {
      console.log(value);
      this.pageInfo.pageSize = value;
      this.search();
    },
    // 当前页
    handleCurrentChange(value) {
      console.log(value);
      this.pageInfo.pageIndex = value;
      this.search();
    },
    // 获取选中门店的id
    handleSelectionChange(rows) {
      console.log(rows);
      this.multipId = [];
      rows.forEach(item => {
        this.multipId.push(item.storeId);
      });
    },

    // 店长编号查询
    // 每页多少条数据
    managerCodehandleSizeChange(value) {
      console.log(value);
      this.managerCodeSelectpageInfo.pageSize = value;
      this.managerCodesearch();
    },
    // 当前页
    managerCodehandleCurrentChange(value) {
      console.log(value);
      this.managerCodeSelectpageInfo.pageIndex = value;
      this.managerCodesearch();
    },
    // 获取选中店长的id
    managerCodehandleSelectionChange(rows) {
      console.log(rows);
      this.managerId = [];
      rows.forEach(item => {
        this.managerId.push(item.userId);
      });
    },
    // 点击取消隐藏弹出的新增表单
    dialogCancel() {
      this.$refs.formRef.resetFields();
      this.dialogVisible = false;
      this.fetch()
    },
    // 点击取消隐藏弹出的修改表单
    editdialogCancel() {
      this.editdialogVisible = false;
      this.fetch()
    },
    // 门店详情查询
    shopDetaildialogCancel(){
      this.shopDetaildialogVisible=false;
      this.fetch()
    },
    // 店长编号查询
    managerCodeGoodsdialogVisibled(){
      this.managerCodedialogVisible=false;
    },
    // 在表单关闭之前清空表单的数据
    dialogBeforeClose() {
      this.$refs.formRef.resetFields();
      this.fetch()
    },
    // 在表单关闭之前清空修改表单的数据
    editdialogBeforeClose() {
      this.$refs.editformRef.resetFields();
      this.fetch()
    },

    // 点击表单确认按钮后事件
    dialogConfirm() {
      this.$refs.formRef.validate(async valid => {
        if (!valid) return;
        req("addStore", {
          ...this.dialogFormData
        }).then(data => {
          console.log(data);
          if (data.code !== 0) {
            return this.$message.error("新增门店失败");
          } else {
            this.$message.success("新增门店成功");
          }
          // 隐藏对话框
          this.dialogVisible = false;
          // 刷新页面
          this.fetch();
        });
      });
    },
    // 点击修改表单确认按钮后事件
    editdialogConfirm() {
      this.$refs.editformRef.validate(async valid => {
        if (!valid) return;
        req("updateStore", {
          ...this.editdialogFormData
        }).then(data => {
          console.log(data);
          if (data.code !== 0) {
            return this.$message.error("修改门店失败");
          } else {
            this.$message.success("修改门店成功");
          }
          // 隐藏对话框
          this.editdialogVisible = false;
          // 刷新页面
          this.fetch();
        });
      });
    },
    // 查询店长编号
    SearchStoreCode() {
      this.managerCodedialogVisible = true;
      this.managerCodesearch();
    },
    // 修改店长编号
    // editSearchStoreCode(){
    //  this.editmanagerCodedialogVisible=true
    //  this.editmanagerCodesearch()
    // },
    // 提交店长编号
    managerCodeGoodSubmit() {
      console.log(this.managerId);
      if (this.managerId.length === 1) {
        // 通过修改店长编号来修改店长
        this.dialogFormData.userId = this.managerId[0];
        this.editdialogFormData.userId = this.managerId[0];
        this.managerCodedialogVisible = false;
      } else {
        return this.$message.error("请选择单个选项查询！");
      }
    },
     // 详情对话框关闭事件
    handleClose() {
      this.detailTableDateArr=[]
      this.detailTableDate=[]
      this.shopDetaildialogVisible=false
      this.fetch();
    },
    shopDetaildialogVisibled(){
      this.detailTableDateArr=[]
      this.detailTableDate=[]
      this.shopDetaildialogVisible=false
      this.fetch()
    }
  },
  // 子组件注册
  components: {
    ISearch,
    ITable,
    IDialog
  }
};
</script>

<style lang="scss" scoped>
.el-form-item {
  /deep/ .el-form-item__label {
    font-size: 13px;
  }
}
.el-input{
  width: 218px;
}
// 地点选择框宽度控制
.selectlocation {
  width: 207px;
}
</style>
